<!-- 
  模板部分：
  使用双大括号 {{ }} 进行数据绑定，展示obj对象中的message属性值
  当obj.message的值发生变化时，模板会自动更新渲染最新内容
-->
<template>
    {{ obj.message }}
</template>

<!-- 
  脚本部分：
  <script setup> 是Vue 3的语法糖，用于简化组件逻辑编写
  在此环境下声明的变量和函数会自动暴露给模板使用
-->
<script setup>
// 从Vue中导入reactive函数
// reactive是Vue 3提供的响应式API，用于创建响应式对象
import { reactive } from 'vue'

// 使用reactive创建响应式对象obj
// 响应式对象的特点是：当对象的属性发生变化时，依赖该属性的视图会自动更新
const obj = reactive({
    message: '不积跬步无以至千里' // 初始化message属性值
})

// 使用setTimeout设置一个2秒后执行的定时器
// 用于演示响应式对象属性更新后，视图如何自动响应变化
setTimeout(() => {
    // 修改响应式对象obj的message属性值
    // 由于obj是通过reactive创建的响应式对象，Vue会追踪此变化
    obj.message = '长风破浪会有时，直挂云帆济沧海'
}, 2000); // 延迟时间：2000毫秒（2秒）
</script>